<template>
  <el-main class="basic-config">
    <div class="basic-box">
            <div class="basic-box-title">账号信息</div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">账号名称：</div>
                <div class="basic-box-item-text">--</div>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">登录密码：</div>
                <div class="basic-box-item-text">*******</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="centerDialogVisible = true">修改</el-button>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">验证手机号：</div>
                <div class="basic-box-item-text">192*****825</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="centerDialogVisible = true">修改</el-button>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">验证邮箱：</div>
                <div class="basic-box-item-text">未验证</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="centerDialogVisible = true">修改</el-button>
            </div>
            <div class="basic-box-item sa-flex">
                <div class="basic-box-item-label">小额免密额度：</div>
                <div class="basic-box-item-text">0元/笔</div>
                <el-button type="text" class="basic-btn sa-m-l-10" @click="centerDialogVisible = true">修改</el-button>
            </div>
          </div>


          <el-dialog
            title="使用 手机短信验证码"
            v-model="centerDialogVisible"
            width="30%"
            center>
            <div class="dia-cls sa-flex">
              <div class="dia-flex">
                <div class="diabody">当前手机号 192*****825</div>
                <div class="dianumber sa-flex sa-m-t-20">
                  <el-input v-model="verificationcode" maxlength="6" class="dia-ipt" placeholder="请输入验证码"></el-input>
                  <el-button :disabled="isCounting" @click="sendCode" class="dia-btn sa-m-l-10" type="primary" :style="isCounting ? 'background-color:#F6F6F6;color:#4B4B4B;border:none' : ''">{{ isCounting ? `${countdown}s 后重新获取` : '获取验证码' }}</el-button>
                </div>
                <div class="dia-text sa-m-t-10" v-show="isCounting">验证码已发送至您的手机，120秒内有效</div>
                <el-button v-show="verificationcode.length !== 6" :disabled="true" class="dia-sub-btn-dis sa-m-t-20" type="primary">提交认证</el-button>
                <el-button v-show="verificationcode.length === 6" class="dia-sub-btn sa-m-t-20" type="primary">提交认证</el-button>
                <div class="diabody sa-m-t-20">Q:收不到短信验证码？</div>
                <div class="diabody sa-m-t-10">A:请检查手机网络并且核实手机是否屏蔽系统短信，如均正常请重新获取或稍后再试</div>
              </div>
              
            </div>
            
            <span slot="footer" class="dialog-footer">
                <!-- <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button> -->
            </span> 
            </el-dialog>
  </el-main>
</template>

<script setup>
  import { reactive, onMounted, ref } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  // 存储验证码
const verificationcode = ref('');
  // 存储手机号码
const phoneNumber = ref('');
// 标记是否正在倒计时
const isCounting = ref(false);
// 倒计时秒数
const countdown = ref(120);

// 发送验证码函数
const sendCode = () => {
  if (isCounting.value) return;
  // 这里可以添加手机号码格式验证逻辑
  // if (!phoneNumber.value) {
  //   alert('请输入手机号码');
  //   return;
  // }
  // 模拟发送验证码的请求，这里可替换为实际的 API 调用
  // console.log('发送验证码到:', phoneNumber.value);

  isCounting.value = true;
  const timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(timer);
      isCounting.value = false;
      countdown.value = 120;
    }
  }, 1000);
};

  const state = reactive({
    data: null,
  });
  const status = reactive({
    flag1:true,
    flag2:true
  })
  const centerDialogVisible = ref(false)
  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const {error,data} = await api.basic.info()
    if (error === 0) {
      state.data = data
    }
  };
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      font-family: 'PingFangSC-Regular, sans-serif';
      color: #3D3D3D;
      z-index: 0;
      font-size: 20px;
      font-weight: bold;
    }
    .basic-box-title-h2{
        width: max-content;
        font-family: 'PingFangSC-Regular, sans-serif';
        color: #3D3D3D;
        z-index: 0;
        font-size: 20px;
        display: flex;
        align-items: center;
        .title-btn{
            font-size: 16px;
        }
    }

    .basic-box-title::after {
    //   pointer-events: none;
    //   content: "";
    //   position: absolute;
    //   height: 8px;
    //   background: var(--t-bg-active);
    //   bottom: 0;
    //   right: 0;
    //   left: 0;
    //   z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;
      min-width: 800px;
      align-items: center;
      .basic-input{
        width: 300px;
      }
      .basic-box-item-label {
        min-width: 100px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        margin-right: 20px;
        display: flex;
        justify-content: flex-end;
        span{
            color: red;
        }
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
  .basic-flex{
    display: flex;
  }
  .dia-cls{
    width: 100%;
    justify-content: center;
    align-items: center;
    .diabody{
      width: 100%;
      color: #666666;
      font-size: 12px;
    }
    .dia-ipt{
      width: 200px;
      height: 50px;
    }
    .dia-btn{
      height: 50px;
    }
    .dia-text{
      font-size: 12px;
      color: #ACACAC;
    }
    .dia-sub-btn{
      background-color: #d44f58;
      width: 400px;
      height: 50px;
      border-color: #d44f58;
      margin-left: 0;
    }
    .dia-sub-btn-dis{
      background-color: #E48B91;
      width: 400px;
      height: 50px;
      border-color: #E48B91;
    }
  }
</style>
